<style lang="scss">
    .alarm-page {
        position: relative;
        height: 100%;
        overflow: hidden;
        padding-top: 7.44rem;
        .mint-header {
            background: transparent;
            border-bottom: none;
        }
    }
    .alarm-statistics {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 7.44rem;
        background-image: url('~assets/img/alarm-bg.png');
        background-repeat: no-repeat;
        background-size: 100%;
        .acitvity-alarm {
            position: absolute;
            width: 2rem;
            height: 2rem;
            top: 37.2%;
            left: 4.3%;
            padding: .49rem .4rem;
            
        }
        .alarm-amount {
            width: 2.78rem;
            height: 2.78rem;
            position: absolute;
            top: 26.2%;
            left: 50%;
            transform: translateX(-50%);
            padding: .47rem;
            text-align: center;
            color: #F9317E;
            line-height: 1.2;
            letter-spacing: 0.01rem;
            .title {
                font-size: .28rem;
            }
            .amount {
                font-size: .8rem;
                font-family: initial;
                font-weight: bold;
            }
            .longest {
                display: inline-block;
                letter-spacing: 0;
                font-size: .18rem;
                border-radius: .14rem;
                width: 1.13rem;
                line-height: .28rem;
                background:rgba(249,49,126,1);
                color: #fff;
            }
            .longest-title {
                display: inline-block;
                font-size: .18rem;
            }
        }
        .passivity-alarm {
            @extend .acitvity-alarm;
            left: auto;
            right: 4.3%;
            text-align: right;
        }
        .type, .percent, .count {
            font-size: .24rem;
            color: #fff;
            line-height: 1.2;
        }
        .percent {
            font-size: .42rem;
        }
        .count {
            font-size: .2rem;
            color: rgba(255, 255, 255, 0.6);
            span{
                font-size: .18rem;
                padding-left: .16rem;
            }
        }
        .tabs {
            width: 100%;
            height: .8rem;
            position: absolute;
            bottom: 8%;
            line-height: .4rem;
            .active {
                .tab-title {
                    color: #fff;
                }
            }
            .tab-item1 {
                width: 31.4%;
                float: left;
                text-align: center;
            }
            .tab-item2 {
                width: 37%;
                float: left;
                text-align: center;
            }
            .tab-item3 {
                width: 31.4%;
                float: right;
                text-align: center;
            }
            .tab-title {
                font-size: .24rem;
                color: rgba(255, 255, 255, .6);
            }
            .tab-count {
                font-size: .28rem;
                color: #fff;
                span{
                    font-size: .18rem;
                    padding-left: .18rem;
                }
            }
        }
    }
    .alarm-record-list {
        height: 100%;
        overflow-y: auto;
        padding-left: .24rem;
        li {
            border-bottom: 1px solid #efefef;
            line-height: .64rem;
            font-size: .24rem;
        }
        .deviceNo {
            float: left;
        }
        .alarm-time {
            float: left;
            margin-left: .24rem;
            color: #888888;
        }
        .time {
            float: right;
            margin-right: .24rem;
        }
    }
</style>

<template>
    <div class="alarm-page">
        <mt-header fixed title="危险提醒">
            <mt-button icon="back" slot="left" @click="$router.push('/homepage')"></mt-button>
        </mt-header>
        <div class="alarm-statistics">
            <div class="acitvity-alarm">
                <div class="type">主动报警</div>
                <div class="percent">80%</div>
                <div class="count">20 <span>次</span></div>
            </div>
            <div class="alarm-amount">
                <div class="title">报警总数</div>
                <div class="amount">25</div>
                <div class="longest">54.37</div>
                <div class="longest-title">最高报警时长S</div>
            </div>
            <div class="passivity-alarm">
                <div class="type">被动报警</div>
                <div class="percent">20%</div>
                <div class="count">5 <span>次</span></div>
            </div>
            <div class="tabs">
                <div :class="['tab-item1', activeIndex == 1 ? 'active' : '']" @click="toggleActiveTabs(1)">
                    <div class="tab-title">危险警示</div>
                    <div class="tab-count">8 <span>次</span></div>
                </div>
                <div :class="['tab-item2', activeIndex == 2 ? 'active' : '']" @click="toggleActiveTabs(2)">
                    <div class="tab-title">危险提醒</div>
                    <div class="tab-count">1 <span>次</span></div>
                </div>
                <div :class="['tab-item3', activeIndex == 3 ? 'active' : '']" @click="toggleActiveTabs(3)">
                    <div class="tab-title">主动求助</div>
                    <div class="tab-count">16 <span>次</span></div>
                </div>
            </div>
        </div>
        <ul class="alarm-record-list">
            <li class="clearfix" v-for="(item, index) in list" :key="item + index">
                <span class="deviceNo">{{ item }}</span>
                <span class="alarm-time">14:23</span>
                <span class="time">14s</span>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list: ['AC012','AC013','AC014','AC015','AC016','AC017','AC018','AC019','AC020','AC021','AC022','AC023','AC024','AC025','AC026','AC027'],
                activeIndex: 1,
            }
        },
        methods: {
            toggleActiveTabs(index) {
                this.activeIndex = index;
                //向后台请求列表 list
            }
        }
    }
</script>
